<template>
    <div class="goods" id="goods" name="goods">
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部商品</el-breadcrumb-item>
                <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
                <el-breadcrumb-item v-show="search">搜索</el-breadcrumb-item>
                <el-breadcrumb-item v-show="search">{{search}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑END -->

        <!-- 分类标签 -->
        <div class="nav">
            <div class="product-nav">
                <div class="title">分类</div>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane v-for="item in categoryList"
                                 :key="item.category_id"
                                 :label="item.category_name"
                                 :name="'' + item.category_id"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- 分类标签END -->

        <!-- 主要内容区 -->
        <div class="main">
            <div class="list">
                <my-list :listData="product" :isMore="true"></my-list>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total"
                        @current-change="currentChange"
                ></el-pagination>
            </div>
            <!-- 分页END -->
        </div>
        <!-- 主要内容区END -->
    </div>
</template>
<script>
    import goodsApi from "../api/goodsApi"
    export default {
        data() {
            return {
                search: "",
                product: [],
                activeName: "-1",
                categoryList: [],
                categoryID: [],
                currentPage: 1,
                pageSize: 15,
                total: 0,
            };
        },
        created() {
            //获取分类列表
            this.getCategory();
        },
        activated() {
            //初始化数据
            this.currentPage = 1;
            this.total= 0;
            this.activeName = "-1";
            console.log("goods.globalData==>",this.$globalData);//{}
            let categoryArr = this.$globalData.categoryArr; //undefined
            if(categoryArr){//判断是否是通过"浏览更多"按钮跳转进来的,如果是 则categoryArr是有数据的 如果不是就是普通的进入 或者是刷新页面
                this.categoryID = categoryArr;
                this.getProduct();
                this.$globalData.categoryArr = null;
                return;
            }

            //在刚进入页面的时候 如果query中没有任何的值 则表示是直接跳转到商品列表的
            let query = this.$route.query;
            if(!Object.keys(query).length){
                this.activeName = "0";
            }else {
                if(query.search){
                    this.search = query.search;
                    this.getProductBySearch();
                }
            }
        },
        watch: {
            activeName(value){//切换分类
                console.log("监听属性categoryID", value);
                //每次切换分类都要重置分页数据/搜索数据
                this.currentPage = 1;
                this.total= 0;
                let categoryID = Number(value);
                //当activeName的值是-1的时候则可能是搜索或者有多个分类
                if(categoryID===-1) return;
                this.search = "";
                //根据分类ID确定是获取所有商品还是单独某一类的商品
                if(categoryID === 0){//获取全部商品
                    this.categoryID = [];
                }else {
                    this.categoryID = [categoryID];
                }
                this.getProduct();
            },
            //监听路由改变
            $route(value){
                if(value.query.search){
                    this.search = value.query.search;
                    console.log("search");
                    this.currentPage = 1;
                    this.total= 0;
                    this.activeName = "-1";
                    this.getProductBySearch();
                }
            }
        },
        methods: {
            //获取商品分类信息
            async getCategory(){
                let {data: res} = await goodsApi.getCategory();
                this.categoryList = res.category;
                this.categoryList.unshift({
                    category_id: 0,
                    category_name: "全部"
                });
                console.log(this.categoryList)
            },
            //获取所有商品
            async getProduct(){
                let sendData = {
                    categoryID: this.categoryID,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                };
                console.log("this.categoryID.length",this.categoryID);
                let apiName = this.categoryID.length?"getProductByCategory":"getAllProduct";
                let {data: res} = await goodsApi[apiName](sendData);
                this.product = res.Product;
                this.total = res.total
            },
            // 页码变化调用currentChange方法
            currentChange(currentPage) {
                this.currentPage = currentPage;
                //如果搜索存在 则证明是搜索的分页
                if(this.search){
                    this.getProductBySearch()
                }else {
                    this.getProduct()
                }
            },
            //根据搜索条件获取数据
            async getProductBySearch(){
                let sendData = {
                    search: this.search,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                };
                let {data: res} = await goodsApi.getProductBySearch(sendData);
                this.product = res.Product;
                this.total = res.total;
            }
        }
    };
</script>

<style type="text/scss" lang="scss" scoped>
    .goods {
        background-color: #f5f5f5;
    }

    /* 面包屑CSS */
    .el-tabs--card .el-tabs__header {
        border-bottom: none;
    }

    .breadcrumb {
        height: 50px;
        background-color: white;
        .el-breadcrumb {
            width: 1225px;
            line-height: 30px;
            font-size: 16px;
            margin: 0 auto;
        }
    }

    /* 面包屑CSS END */

    /* 分类标签CSS */
    .nav {
        background-color: white;
        .product-nav {
            width: 1225px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            .title {
                width: 50px;
                font-size: 16px;
                font-weight: 700;
                float: left;
            }
        }
    }

    /* 分类标签CSS END */

    /* 主要内容区CSS */
    .main {
        margin: 0 auto;
        max-width: 1225px;
        .list {
            min-height: 650px;
            padding-top: 14.5px;
            margin-left: -13.7px;
            overflow: auto;
        }
        .pagination {
            height: 50px;
            text-align: center;
        }
        .none-product {
            color: #333;
            margin-left: 13.7px;
        }
    }

    /* 主要内容区CSS END */
</style>